import React, { FC, useContext, useState } from "react"
import { GlobalContext } from "../config/globalContext"
import { getClassNames, getStyles, getValueIfQualified, isBoolean } from "../utils/tools"
import { TitlePropsType } from "./interface"
import Text from '../Text'

const Title: FC<TitlePropsType> = (props, ref) => {
  const {
    classNamePrefix
  } = useContext(GlobalContext);

  const prefixCls = `${classNamePrefix}-title`

  const {
    type = 'text',
    title,
    tooltip,
    children,
    className,
    style,
    textProps,
    divider = true,
    heading = 1,
    margin: marginProps,
    bodyProps,
    description,
    ...rest
  } = props

  const margin = {
    top: true,
    ...marginProps
  }

  const classNamesObj = {
    title: getClassNames([
      `${prefixCls}`,
      {
        [`${prefixCls}-margin-top`]: isBoolean(margin?.top) && margin.top,
        [`${prefixCls}-margin-right`]: isBoolean(margin?.right) && margin.right,
        [`${prefixCls}-margin-bottom`]: isBoolean(margin?.bottom) && margin.bottom,
        [`${prefixCls}-margin-left`]: isBoolean(margin?.left) && margin.left,
      },
      className
    ]),
    body: getClassNames([
      `${prefixCls}-body`,
      bodyProps?.className
    ]),
    description: getClassNames([
      `${prefixCls}-description`,
    ])
  }

  const bodynRender = () => {
    return children && (
      <div {...bodyProps} className={`${prefixCls}-body`}>
        {children}
      </div>
    )
  }

  const stylesObj = {
    title: getStyles([
      style,
      {
        marginTop: getValueIfQualified(margin.top, !isBoolean(margin?.top)) as any,
        marginBottom: getValueIfQualified(margin.right, !isBoolean(margin?.right)) as any,
        marginRight: getValueIfQualified(margin.bottom, !isBoolean(margin?.bottom)) as any,
        marginLeft: getValueIfQualified(margin.left, !isBoolean(margin?.left)) as any,
      }
    ])
  }

  const dividerRender = () => {
    return divider && (
      <div className={`${prefixCls}-bottom-border`}>
        <div className={`${prefixCls}-bottom-border-left`}></div>
        <div className={`${prefixCls}-bottom-border-center`}></div>
        <div className={`${prefixCls}-bottom-border-right`}></div>
      </div>
    )
  }

  const tooltipRender = () => {
    return (
      tooltip === 'tooltip' && (
        <div className={`${prefixCls}-tooltip`}>
          { }
        </div>
      )
    )
  }

  const descriptionRender = () => {
    return description && (
      <div className={classNamesObj.description}>
        {description}
      </div>
    )
  }

  return (
    <div {...rest} style={stylesObj.title} className={classNamesObj.title}>
      <div className={`${prefixCls}-main`}>
        <Text level={heading} type='primary' {...textProps}>{title}</Text>
        {tooltipRender()}
      </div>
      {descriptionRender()}
      {dividerRender()}
      {bodynRender()}
    </div>
  )
}
export default Title